<template>
	<view class="content">
		<u-table>
			<u-tr class="u-tr">
				<u-th class="u-th">今日车数</u-th>
				<u-th class="u-th">今日斗数</u-th>
				<u-th class="u-th">累计车数</u-th>
				<u-th class="u-th">累计斗数</u-th>
			</u-tr>
			<u-tr class="u-tr">
				<u-td class="u-td">{{ total.todayCars}}</u-td>
				<u-td class="u-td">{{ total.todayBucket}}</u-td>
				<u-td class="u-td">{{ total.totalCars}}</u-td>
				<u-td class="u-td">{{ total.totalBucket}}</u-td>
			</u-tr>
		</u-table>
		<view class="row" style="margin: 20rpx 0;">
			<u-button @click="toCount" type="success" size="mini">计数</u-button>
			<u-button @click="reset" type="info" size="mini">刷新</u-button>
			<u-button type="error" size="mini" @click="loginout">退出登录</u-button>
		</view>

		<view class="line">过往统计</view>
		<view class="row">
			<view class="item">
				按：<u-tag text="月" mode="dark" />&nbsp;统计
			</view>
			<view class="item" @click="openPicker">
				时间：<u-tag :text="currentTime" mode="dark" />
			</view>
		</view>

		<u-table style="margin-top: 30rpx;">
			<u-tr class="u-tr">
				<u-th class="u-th">时间</u-th>
				<u-th class="u-th">车数</u-th>
				<u-th class="u-th">斗数</u-th>
			</u-tr>
			<u-tr class="u-tr" v-for="item,index in dataList" :key="index">
				<u-td class="u-td">{{item.time}}</u-td>
				<u-td class="u-td">{{item.cars}}</u-td>
				<u-td class="u-td">{{item.buckets}}</u-td>
			</u-tr>
			<u-tr class="u-tr" v-if="!dataList.length">
				<u-td class="u-td">暂无数据...</u-td>
				</u-tr>
		</u-table>

	</view>

	<u-picker start-year="2022" :end-year="endYear" v-model="pickerShow" mode="time" :params="params"
		:default-time="defaultTime" @confirm="pickerConfirm"></u-picker>

	<u-back-top :scroll-top="scrollTop" tips="回顶部"></u-back-top>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';

	import dayjs from 'dayjs'
	import {
		onReady,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		apiTotal,
		apiCounts,
		todayCount,
		countByMonth
	} from '@/api/index.js';
	
	const dataList=ref([])

	const endYear = ref(dayjs().format('YYYY'))

	//日期选择器默认时间
	const defaultTime = ref(dayjs().format('YYYY-MM'))
	//当前时间
	const currentTime = ref(dayjs().format('YYYY-MM'))

	const pickerShow = ref(false)
	const openPicker = () => {
		pickerShow.value = true
	}
	const pickerConfirm = (e) => {
		console.log('e',e);
		const {
			year,
			month
		} = e;
		currentTime.value = `${year}-${month}`
		getCountByMonth(currentTime.value)
	}

	const params = reactive({
		year: true,
		month: true,
		day: false
	})


	const total = ref({
		todayBucket: 0,
		todayCars: 0,
		totalBucket: 0,
		totalCars: 0
	})
	//获取进入车数与总数
	const getTotal = async () => {
		const userID = uni.getStorageSync('userID') || ''
		const res = await apiTotalt (userID)
	}
	// getTotal()

	// 获取今日土方数量
	const getTodayCount = async () => {
		const userID = uni.getStorageSync('userID') || ''
		const res = await todayCount(userID)
		// console.log('日-土方',res);
		total.value = res
	}
	getTodayCount()

	//按月查询土方数量
	const getCountByMonth = async (time) => {
		const userID = uni.getStorageSync('userID') || ''
		const res = await countByMonth(userID,time)
		dataList.value=res
	}
	getCountByMonth(currentTime.value)

	

	const getTable = async () => {

	}
	
	//刷新
	const reset=()=>{
		getTodayCount()
		getCountByMonth(currentTime.value)
	}


	onPullDownRefresh(() => {
		currentTime.value = dayjs().format('YYYY-MM')
		uni.stopPullDownRefresh()
	})

	const scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	const toCount = () => {
		uni.navigateTo({
			url: '/pages/count/count'
		})
	}

	const loginout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗?',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					uni.clearStorageSync()
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.line {
		text-align: center;
		line-height: 80rpx;
		font-weight: bold;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 24rpx;

		.item {
			display: flex;
			align-items: center;
		}
	}
</style>